<template>
    <div class="card-body">
          <div class="table-responsive">
            <el-table class="table table-bordered" :data="tableData" stripe style="width: 100%"
              @selection-change="handleSelectionChange" @row-click="openDetails"
               v-loading="loading2"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
              >
              <el-table-column label="Id" width="180">
                <template v-slot="scope">
                  <span style="margin-left: 10px">{{ scope.row.Id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="Name" width="160">
                <template v-slot="scope">
                  <span style="margin-left: 10px">{{ scope.row.Repository }}</span>
                </template>
              </el-table-column>
              <el-table-column label="Tags">
                <template v-slot="scope">
                  <span style="margin-left: 10px">{{ scope.row.Tags }}</span>
                </template>
              </el-table-column>
              <el-table-column label="CreateTime">
                <template v-slot="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.Created }}</span>
                </template>
              </el-table-column>
              <el-table-column label="Actions">
                <template v-slot="scope">
                  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">重启</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :total="totalSize"
          :page-size="size"
          background
          @current-change="goRightPage"
        ></el-pagination>
      </div>
        </div>
  </template>
  <script>
  import { dockerListImages} from "@/network/images.js";
  
  export default {
    name: "Image",
     data() {
      return {
        tableData: [],
        loading2: true,
        multipleSelection: [],
        totalSize: 50,
        current: 1,
        size: 5,
          form: {
          apps: [],
        },
      }
      
    },
    watch: {
          multipleSelection: function () {
              let arr = [];
              for (let i in this.multipleSelection) {
                arr.push(this.multipleSelection[i].Names);
              }
              console.log('勾中的id为：' + arr.join());
          }
      },
      created() {
        dockerListImages({namespace: "default"}).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.tableData = res.data
          this.totalSize=res.data.length
          this.loading2=false
  
        }
      })
    },
    methods: {
              //打开详情页弹窗
          openDetails(row,event) {
            console.log(row,event)
                  alert(row.Names);
              
          },
          handleEdit(idex,row){
                        let arr = [];
                        arr.push(row.Names)
           
          },
          // 获取多选参数
          handleSelectionChange(val) {
              this.multipleSelection = val;
          },
          goRightPage(val) {
          console.log(`当前页: ${val}`);
          
        }
    },
  };
  </script>